{% extends "base_form.html" %}

{% block csscontent %}
    <link href="{{ static('lib/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ static('css/bootstrap-markdown.min.css') }}" rel="stylesheet">
    {#            <link href="{{ static('css/flat-ui.css') }}" rel="stylesheet">#}
    <link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.6/css/fileinput.css" rel="stylesheet">
    <style>
        .model_title {
            text-align: center;
            font-style: inherit;
            color: #ffffff;
            font-size: 18px;
            background: #3c8dbc;
            -webkit-border-radius: 20px 20px 0px 0px;
            -moz-border-radius: 20px 20px 0px 0px;
            border-radius: 20px 20px 0px 0px;
        }

        .form-group {
            margin-right: 0px;
            margin-left: 0px;
        }
    </style>
{% endblock %}

{% macro segment_input(name,value) %}
    <div class="form-group">
        <input class="form-control" type="text" id="id_{{ name }}" name="{{ name }}" value="{{ value }}"
               placeholder="{{ value }}">
    </div>
{% endmacro %}


{% block form_body %}
    <form id="index_form" name="index_form" action='#'
          role="form" method="post" class="form-horizontal"
          enctype="multipart/form-data">

        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        {% if action %}
            <input hidden name="pic_id" value="{{ pic_id }}">
            <input hidden name="action" value="{{ action }}">
        {% endif %}

        <div class="row">
            <div class="col-sm-12">


                <div class="panel panel-default">
                    <div class="panel-body">
                        {% if form.non_field_errors() %}
                            <div class="alert alert-danger"
                                 role="alert">{{ form.non_field_errors()|join('|') }}</div>{% endif %}

                        {% set messages = get_messages(request) %}
                        {% if messages %}
                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                {{ messages|join('|') }}
                            </div>
                        {% endif %}


                        <div class="row col-sm-12">

                            <div class="col-sm-6">

                                <h4>基本信息</h4>
                                <div class="form-group">
                                    {{ form_input(form.name, "col-sm-3 control-label", "col-sm-6") }}
                                </div>

                                <div class="form-group">
                                    {{ form_input(form.description, "col-sm-3 control-label not_valid", "col-sm-6") }}
                                </div>

                                <div class="form-group">
                                    {{ form_input_bool(form.status, "col-sm-3 control-label", "col-sm-2", "checkbox") }}
                                </div>

                            </div>


                            <div class="col-sm-6">
                                <h4><span class="text-danger">*</span> 上传图片：
                                    {% if form.path.value() %}
                                        <a href="{{ form.path.value() }}">点击下载</a>
                                    {% else %}
                                        <label>未上传</label>
                                    {% endif %}
                                </h4>
                            </div>

                            <div class="col-sm-6">


                                <h4> 添加不靠谱图片</h4>
                                <input style="width:200px;height: 200px;" id="bkp_pic_uploader" name="bkp_pic_bp"
                                       type="file">

                            </div>


                        </div>

                        {% if action !='check' %}
                            <button type="button" class="btn btn-primary" onclick="init_model_validator();"
                                    data-toggle="modal" data-target="#myModal">
                                ＋添加目标
                            </button>
                        {% endif %}


                        <div class="row col-sm-12">

                            <table class="table table-striped table-bordered table-hover" id="target_table">
                                <thead>
                                <tr>
                                    <th style="width:80px;">序号</th>
                                    <th>目标名称</th>
                                    <th colspan="2">左上坐标</th>
                                    <th colspan="2">右下坐标</th>
                                    <th colspan="2">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for seg in  segments %}
                                    <tr id="id_{{ seg.id }}">
                                        <td></td>
                                        <td>{{ segment_input('target_name',seg.name) }}</td>
                                        <td>{{ segment_input('top_left_x',seg.top_left_x) }}</td>
                                        <td>{{ segment_input('top_left_y',seg.top_left_y) }}</td>
                                        <td>{{ segment_input('bottom_right_x',seg.bottom_right_x) }}</td>
                                        <td>{{ segment_input('bottom_right_y',seg.bottom_right_y) }}</td>
                                        {#                                        <td><a type="button" class="btn ">复制</a> </td>#}
                                        <td>
                                            <a type="button" class="btn "
                                               onclick="del_target('id_'+'{{ seg.id }}');">删除</a>
                                        </td>
                                    </tr>

                                {% endfor %}

                                </tbody>
                            </table>
                            <div class="col-lg-12 col-lg-offset-5">

                                {% if action !='check' %}
                                    <button type="submit" class="btn btn-primary sm-lg-4">保存</button>
                                {% endif %}
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </form>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content" style="    border-radius: 20px;">
                <div class="modal-header model_title">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加目标
                    </h4>
                </div>
                <div class="modal-body">
                    {#                    添加目标弹窗内容#}
                    <form id="model_form"
                          role="form" method="post" class="form-horizontal"
                          enctype="multipart/form-data">


                        {#                        <h4>基本信息</h4>#}
                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.target_name, "col-sm-2 control-label", "col-sm-3") }}

                            </div>
                        </div>
                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.top_left_x, "col-sm-2 control-label", "col-sm-3") }}
                                {{ form_input(form.top_left_y, "col-sm-2 control-label", "col-sm-3") }}
                            </div>
                        </div>

                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.bottom_right_x, "col-sm-2 control-label", "col-sm-3") }}
                                {{ form_input(form.bottom_right_y, "col-sm-2 control-label", "col-sm-3") }}
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭
                            </button>
                            <button type="submit" id="id_modal_submit" class="btn btn-primary" data-dismiss="modal"
                                    onclick="getFormInfo('model_form')">
                                提交更改
                            </button>
                        </div>

                    </form>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


{% endblock form_body %}

{% block body_js %}
    <script src="{{ static('js/fileinput.js') }}"></script>
    <script src="{{ static('js/fileinput_locale_zh.min.js') }}"></script>
    {#    常用数据处理函数#}
    <script src="{{ static('js/util.js') }}"></script>

    <script>
        {#    本页面逻辑处理函数#}
        {#        $('#myModal').on('show.bs.modal', function () {#}
        {#            var form_target = $('form');#}
        {#            form_target.data('bootstrapValidator').destroy();#}
        {#            form_target.data('bootstrapValidator', null);#}
        {#            init_valid('model_form');#}
        {#        });#}

    </script>

    <script>
        {#    页面初始化#}
        $(document).ready(function () {
            initFileInputFullfill("bkp_pic_uploader", "/User/EditPortrait", "id_name");
            auto_add_table_id();
            init_index_form_validator();
        });
    </script>

    <script>
        function del_target(id) {
            $('#' + id).remove();
            auto_add_table_id('');
        }

        function init_index_form_validator() {
            init_valid('index_form');
            remove_valid('index_form', 'description');
            append_valid('index_form', 'target_name');
            append_valid_digital('index_form', 'top_left_x');
            append_valid_digital('index_form', 'top_left_y');
            append_valid_digital('index_form', 'bottom_right_x');
            append_valid_digital('index_form', 'bottom_right_y');

        }

        function init_model_validator() {
            //开启验证modal

            init_valid('model_form');
            append_valid('model_form', 'target_name');
            append_valid_digital('model_form', 'top_left_x');
            append_valid_digital('model_form', 'top_left_y');
            append_valid_digital('model_form', 'bottom_right_x');
            append_valid_digital('model_form', 'bottom_right_y');

        }


        function getFormInfo(formid) {
            if (is_valid(formid)) {
                var timestamp = (new Date()).valueOf();
                var params = getElements(formid);
                var tr_string = '<tr id=id_' + timestamp + '><td>id</td>';
                for (var i = 0; i < params.length; i++) {
                    tr_string += '<td>';
                    tr_string += '<div class="form-group" >';
                    tr_string += ('<input class="form-control" type="text" id=' + params[i].name);
                    tr_string += ('   name=' + params[i].name);

                    if (params[i].value != '') {
                        tr_string += ('   value=' + params[i].value);
                        tr_string += ('   placeholder=' + params[i].value);
                    }
                    else {
                        tr_string += ('   value="" ');
                        tr_string += ('   placeholder="" ' );
                    }
                    tr_string += (' >');
                    tr_string += '</div>';
                    tr_string += '</td>';
                }
                tr_string += '<td><a type="button" class="btn btn-segment-delete" onclick="del_target(\'' + "id_" + timestamp + '\');"' + ' >删除</a></td>';
                add_table_tr('target_table', tr_string);
                auto_add_table_id();
                init_index_form_validator();

            }
            else {
                console.log('bootstrap validater failed');
            }


        }
    </script>

{% endblock %}
